<template>
  <div>
    <el-dialog
      :title="addInfo.isAdd ? '添加秒杀列表' : '编辑秒杀列表'"
      :visible.sync="addInfo.flag"
      center
      :before-close="cancel"
    >
      <el-form
        v-model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        :label-width="formLabelWidth"
      >
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="ruleForm.title"></el-input>
        </el-form-item>

        <el-form-item label="活动期限" :label-width="formLabelWidth">
          <el-date-picker
            type="datetimerange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="chantime"
            :picker-options="pickerOptions"
            v-model="value"
            value-format="yyyy-M-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="一级分类"
          :label-width="formLabelWidth"
          prop="first_cateid"
        >
          <el-select
            v-model="ruleForm.first_cateid"
            placeholder="请选择"
            @change="changeCate"
          >
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :value="item.id"
              :label="item.catename"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="二级分类"
          :label-width="formLabelWidth"
          prop="second_cateid"
        >
          <el-select
            @change="changeGoods"
            v-model="ruleForm.second_cateid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in secondCateA"
              :key="item.id"
              :value="item.id"
              :label="item.catename"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品" :label-width="formLabelWidth" prop="goodsid">
          <el-select v-model="ruleForm.goodsid" placeholder="请选择">
            <el-option
              v-for="item in goodslist"
              :key="item.id"
              :value="item.id"
              :label="item.goodsname"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { seckadd, seckedit, seckinfo, goodslist } from "../../request/api";
export default {
  props: ["addInfo"],
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value: "",
      formLabelWidth: "120px",
      ruleForm: {
        first_cateid: "", //一级分类编号
        second_cateid: "", //二级分类编号
        goodsid: "", //商品编号
        title: "",
        status: 1,
        begintime: "", //开始时间
        endtime: "", //结束时间
      },
      rules: {
        title: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      secondCateA: [], //存放二级分类
      goodslist: [],
    };
  },
  mounted() {
    this.getCateAction();
  },
  computed: {
    ...mapGetters({
      catelist: "cate/getCteList",
    }),
  },
  methods: {
    ...mapActions({
      getCateAction: "cate/changeCateAction",
      getSeckillAction: "seckill/getSeckillAction",
    }),
    chantime() {
      let a = this.value[0];
      let b = this.value[1];
      //开始时间
      let s = new Date(a).getTime();
      //结束时间
      let c = new Date(b).getTime();
      this.ruleForm.begintime = s;
      this.ruleForm.endtime = c;
    },
    chanFROM() {
      console.log(this.ruleForm);
    },
    //清空表单
    rmove() {
      this.ruleForm = {
        first_cateid: "", //一级分类编号
        second_cateid: "", //二级分类编号
        goodsid: "", //商品编号
        title: "",
        status: 1,
      };
      this.$refs.ruleForm.resetFields();
    },
    //获取一级分类下的二级分类事件
    changeCate() {
      console.log(this.catelist);

      let index = this.catelist.findIndex(
        (item) => this.ruleForm.first_cateid == item.id
      );

      console.log(index, "-------");
      this.secondCateA = this.catelist[index].children;
    },
    //封装获取二级分类下的商品函数
    async changeGoods(id) {
      let res = await goodslist();
      let a = res.list.filter((item) => {
        return item.second_cateid == id;
      });
      this.goodslist = a;
    },
    //点击取消
    cancel() {
      this.rmove();
      this.$emit("cancel", false);
    },
    //获取一条数据
    async lookup(id) {
      this.ruleForm = id;
      this.value = [
        new Date(parseFloat(this.ruleForm.begintime)),
        new Date(parseFloat(this.ruleForm.endtime)),
      ];
      // console.log([new Date(parseFloat(res.list.begintime)), new Date(parseFloat(res.list.endtime))]);
      let res1 = await goodslist();
      this.goodslist = res1.list.filter(
        (item) => item.second_cateid == this.ruleForm.second_cateid
      );
      this.changeCate();
      this.changeGoods();
    },
    //点击确认
    confirm() {
      this.$refs.ruleForm.validate((val) => {
        // console.log(val);
        if (val) {
          if (this.addInfo.isAdd) {
            seckadd(this.ruleForm).then((res) => {
              if (res.code == 200) {
                //清空表单函数
                this.rmove();
                //调用列表函数
                this.getSeckillAction();
                //调用关闭函数
                this.cancel();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            //编辑接口
            seckedit(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.rmove();
                //调用关闭函
                //调用列表函数
                this.getSeckillAction();
                this.cancel();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ipt_info {
  width: 75%;
}
</style>